<script setup>
import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'
import {ElMessage} from 'element-plus'
import {reqGetGoodsDetail} from '@/api/order';
// 导入组件
import ImageView from '@/components/detail/ImageView.vue'
import SkuView from '@/components/detail/SkuView.vue'
import DetailHot from './components/DetailHot.vue'

const route = useRoute()
onMounted(() => {
  getGoodsDetail()
})
// 获取商品详情
const goods = ref({})
const getGoodsDetail = async () => {
  const res = await reqGetGoodsDetail(route.params.id)
  // 所有商品信息
  goods.value = res.data.result
  ElMessage.success('商品详情获取成功！')
}
// 点击详情榜单刷新页面
const handleClickDetail = () => {
  getGoodsDetail()
}

// 商品数量
const count = ref(1)
const countChange = (val) => {
  // 限制输入框只能输入数字
  if (isNaN(val) || val < 1) {
    count.value = 1
  }
}

// 加入购物车
const addToCart = () => {
  ElMessage.success('加入购物车成功！')
}


</script>

<template>
  <div class="detail-index" v-if="goods.details">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/category/${goods.categories[0].id}` }">{{ goods.categories[1].name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories[1].id}` }">{{ goods.categories[0].name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ goods.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 商品详情 -->
    <div class="goods-detail">
      <div class="goods-top">
        <!-- 图片预览与统计数量 -->
        <div class="media-box">
          <ImageView :image-list="goods.mainPictures"/>
          <ul class="sales-count">
            <li>
              <span>销量人气</span>
              <span>{{ goods.salesCount }}+ </span>
              <span><i class="iconfont icon-task-filling">🚩</i>销量人气</span>
            </li>
            <li>
              <span>商品评价</span>
              <span>{{ goods.commentCount }}+ </span>
              <span><i>📧</i> 查看评价</span>
            </li>
            <li>
              <span>收藏人气</span>
              <span>{{ goods.collectCount }}+ </span>
              <span><i>⭐</i> 收藏商品</span>
            </li>
            <li>
              <span>品牌质量</span>
              <span>{{ goods.brand.name }}</span>
              <span><i>🧩</i>品牌主页</span>
            </li>
          </ul>
        </div>
        <!-- 商品信息区 -->
        <div class="sku-box">
          <span class="sku-name">{{ goods.name }}</span>
          <span class="sku-desc">{{ goods.desc }}</span>
          <div class="sku-price">
            <span>￥{{ goods.price }}</span>
            <p>￥{{ goods.oldPrice }}</p>
          </div>
          <div class="sku-service">
            <dl>
              <dt>促销</dt>
              <dd>12月好物放送，App领券购买直降120元</dd>
            </dl>
            <dl>
              <dt>服务</dt>
              <dd>
                <span>无忧退货</span>
                <span>快速退款</span>
                <span>免费包邮</span>
                <a href="javascript:;">了解详情</a>
              </dd>
            </dl>
          </div>
          <!-- sku组件 -->
          <SkuView :goods="goods" @change="skuChange"/>
          <!-- 数据组件 -->
          <el-input-number class="sku-input" v-model="count" @change="countChange"/>
          <div class="sku-btn">
            <el-button type="primary" @click="addToCart">加入购物车</el-button>
          </div>
        </div>

      </div>

      <div class="goods-footer">
        <!-- 商品所有详细信息 -->
        <div class="all-info">
          <nav class="nav">
            <a>商品详情：{{ goods.name }}</a>
          </nav>
          <div class="img-content">
            <!-- 属性 -->
            <ul class="attr">
              <li v-for="attr in goods.details.properties" :key="attr.value">
                <span class="dt">{{ attr.name }}：</span>
                <span class="dd">{{ attr.value }}</span>
              </li>
            </ul>
            <!-- 图片 -->
            <img v-for="img in goods.details.pictures" :src="img" :key="img" alt="">
          </div>
        </div>
        <!-- 24热榜+专题推荐 -->
        <div class="hot-info">
          <!-- 24小时 -->
          <DetailHot :hot-type="1" @click="handleClickDetail"/>
          <!-- 周推荐 -->
          <DetailHot :hot-type="2" @click="handleClickDetail"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.detail-index {
  display: flex;
  flex-direction: column;
  max-width: 1240px;
  margin: 0 auto;

  .breadcrumb {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
  }

  .goods-detail {
    display: flex;
    flex-direction: column;
    margin-top: 20px;

    .goods-top {
      height: 600px;
      display: flex;
      justify-content: space-between;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

      .media-box {
        display: flex;
        padding: 30px 50px;
        flex-direction: column;

        .sales-count {
          display: flex;
          align-items: center;
          height: 140px;
          //padding:0 50px;

          li {
            flex: 1;
            height: 80%;
            padding: 0 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #e1e1e1;

            &:last-child {
              border-right: none;
            }

            span {
              margin: 5px 0;

              &:first-child {
                color: #999;
              }

              &:nth-child(2) {
                color: #ff5e00;
              }

              &:last-child {
                color: #666;

                &:hover {
                  color: #27ba9b;
                  cursor: pointer;
                }
              }

            }
          }
        }
      }

      .sku-box {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 10px;
        margin: 30px 20px 30px 0;
        border: 1px solid #e8e8e8;
        border-radius: 5px;

        .sku-name {
          font-size: 22px;
          color: #333;
        }

        .sku-desc {
          font-size: 16px;
          color: #999;
          margin-top: 10px;
        }

        .sku-price {
          margin-top: 10px;
          display: flex;
          align-items: center;

          span {
            color: #ff5e00;
            margin-right: 10px;
            font-size: 22px;
          }

          p {
            color: #999;
            text-decoration: line-through;
            font-size: 16px;
          }
        }

        .sku-service {
          margin: 10px 0;
          background: #f5f5f5;
          border-radius: 5px;
          width: 500px;
          padding: 20px 10px 0 10px;

          dl {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            dt {
              width: 50px;
              color: #999;
            }

            dd {
              color: #666;

              &:last-child {
                span {
                  margin-right: 10px;

                  &::before {
                    content: "•";
                    color: #27ba9b;
                    margin-right: 5px;
                  }
                }

                a {
                  color: #27ba9b;
                }
              }
            }
          }
        }

        .sku-input {
          width: 150px;
        }

        .sku-btn {
          margin-top: 10px;
          display: flex;

          .el-button {
            width: 150px;
            height: 40px;
            background-color: #27ba9b;
            color: #fff;
            border-radius: 5px;
            border: none;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
    }

    .goods-footer {
      display: flex;
      margin-top: 20px;


      .all-info {
        flex: 3;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        margin-right: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .nav {
          height: 70px;
          display: flex;
          align-items: center;
          background-color: #ffffff;
          border-bottom: 1px solid #e1e1e1;

          a {
            padding: 0 40px;
            font-size: 20px;
            font-weight: bold;
            color: rgba(255, 94, 0, 0.68);
            font-family: "Arial", sans-serif;
          }
        }

        .img-content {
          padding: 40px;

          .attr {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 40px;

            li {
              display: flex;
              height: auto;
              padding: 10px 15px;
              width: 50%;

              .dt {
                color: #999;
                width: 100px;
                font-size: 16px;
              }

              .dd {
                flex: 1;
                color: #666;
                font-size: 14px;
              }
            }
          }

          img {
            width: 100%;
          }
        }
      }

      .hot-info {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 1000px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
    }
  }


}

</style>